<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火影忍者手游官网</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f8f8f8;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        section {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            padding: 25px;
        }

        h2 {
            color: #e74c3c;
            margin-bottom: 15px;
            font-size: 22px;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }

        /* 注册表单样式 */
        #reg form {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 100%;
            max-width: none;
        }

        #reg label {
            font-weight: bold;
            align-self: center;
        }

        #reg input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }

        #reg button {
            padding: 12px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #reg button:hover {
            background-color: #c0392b;
        }



        /* 轮播图样式 */
        #carousel {
            margin-bottom: 30px;
        }

       .carousel-container {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            overflow: hidden;
        }

       .carousel-slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

       .slide {
            min-width: 100%;
        }

       .slide img {
            width: 800px;
            height: 450px;
            object-fit: cover;
        }

       .carousel-controls {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
            z-index: 10;
        }

       .carousel-controls button {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

       .carousel-controls button:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

       .carousel-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

       .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 0 5px;
            cursor: pointer;
        }

       .indicator.active {
            background-color: white;
        }

        /* 商品展示样式 */
        .prod-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 25px;
        }

        .prod-item {
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .prod-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .prod-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .prod-info {
            padding: 15px;
        }

        .prod-info p {
            margin-bottom: 10px;
        }

        .prod-info button {
            width: 100%;
            padding: 10px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .prod-info button:hover {
            background-color: #2980b9;
        }

        /* 商品搜索样式 */
        #search-box {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        #search-input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            width: 500px;
            max-width: none;
        }
        #search-btn {
            padding: 10px 20px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-left: 10px;
        }
        #search-btn:hover {
            background-color: #c0392b;
        }

        /* 购物车样式 */
        #cart-list {
            list-style: none;
            margin-bottom: 20px;
        }

        #cart-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        #cart-list li:last-child {
            border-bottom: none;
        }

        .cart-total {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 15px;
        }

        #cart button {
            padding: 10px 20px;
            background-color: #e67e22;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #cart button:hover {
            background-color: #d35400;
        }


    </style>
</head>

<body>
    <section id="search-box">
        <input type="text" id="search-input" placeholder="搜索商品...">
        <button id="search-btn">搜索</button>
    </section>
    
    <!-- 轮播图模块 -->
    <section id="carousel">
        <div class="carousel-container">
            <div class="carousel-slides">
                <div class="slide">
                    <img src="img/火影1.jpg" alt="火影忍者1">
                </div>
                <div class="slide">
                    <img src="img/火影2.jpg" alt="火影忍者2">
                </div>
                <div class="slide">
                    <img src="img/火影3.jpg" alt="火影忍者3">
                </div>
            </div>
            <div class="carousel-controls">
                <button class="prev" onclick="prevSlide()">❮</button>
                <button class="next" onclick="nextSlide()">❯</button>
            </div>
            <div class="carousel-indicators">
                <span class="indicator" onclick="goToSlide(0)"></span>
                <span class="indicator" onclick="goToSlide(1)"></span>
                <span class="indicator" onclick="goToSlide(2)"></span>
            </div>
        </div>
    </section>

    <!-- 商品展示模块 -->
    <section id="prods">
        <h2>忍者商店</h2>
        <div class="prod-list" id="prodList">
            <div class="prod-item">
                <img src="img/火影8.jpg" alt="漩涡鸣人">
                <div class="prod-info">
                    <p>漩涡鸣人 [九尾模式]</p>
                    <p class="prod-price">¥98.00</p>
                    <button onclick="addToCart(1, '漩涡鸣人 [九尾模式]', 98)">立即购买</button>
                </div>
            </div>

            <div class="prod-item">
                <img src="img/博人传.jpg" alt="漩涡博人">
                <div class="prod-info">
                    <p>漩涡博人 [净眼模式]</p>
                    <p class="prod-price">¥138.00</p>
                    <button onclick="addToCart(5, '漩涡博人 [净眼模式]', 138)">立即购买</button>
                </div>
            </div>
            <div class="prod-item">
                <img src="img/火影4.jpg" alt="木叶十二忍">
                <div class="prod-info">
                    <p>木叶十二忍 [联合忍术]</p>
                    <p class="prod-price">¥118.00</p>
                    <button onclick="addToCart(6, '木叶十二忍 [联合忍术]', 118)">立即购买</button>
                </div>
            </div>
            <div class="prod-item">
                <img src="img/火影5.jpg" alt="木叶村徽">
                <div class="prod-info">
                    <p>木叶村徽 [限量周边]</p>
                    <p class="prod-price">¥78.00</p>
                    <button onclick="addToCart(7, '木叶村徽 [限量周边]', 78)">立即购买</button>
                </div>
            </div>
            <div class="prod-item">
                <img src="img/火影3.jpg" alt="新登场忍者">
                <div class="prod-info">
                    <p>新登场忍者 [神秘技能]</p>
                    <p class="prod-price">¥148.00</p>
                    <button onclick="addToCart(9, '新登场忍者 [神秘技能]', 148)">立即购买</button>
                </div>
            </div>
            <div class="prod-item">
                <img src="img/火影1.jpg" alt="火影忍者视频礼包">
                <div class="prod-info">
                    <p>火影忍者精彩片段 [视频礼包]</p>
                    <p class="prod-price">¥98.00</p>
                    <button onclick="addToCart(8, '火影忍者精彩片段 [视频礼包]', 98)">立即购买</button>
                </div>
            </div>

            <div class="prod-item">
                <img src="img/火影9.jpg" alt="漂泊佩恩">
                <div class="prod-info">
                    <p>漂泊佩恩 [忍术]</p>
                    <p class="prod-price">¥88.00</p>
                    <button onclick="addToCart(3, '漂泊佩恩 [忍术]', 88)">立即购买</button>
                </div>
            </div>

            <div class="prod-item">
                <img src="img/火影6.jpg" alt="宇智波带土">
                <div class="prod-info">
                    <p>宇智波带土 [忍界大战]</p>
                    <p class="prod-price">¥108.00</p>
                    <button onclick="addToCart(4, '宇智波带土 [忍界大战]', 108)">立即购买</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 购物车模块 -->
        <section id="cart" style="margin-top: 20px;">
        <h2>购物车</h2>
        <ul id="cartList"></ul>
        <div class="cart-total">总计：<span id="cartTotal">¥0.00</span></div>
        <button onclick="clearCart()">清空购物车</button>
        <button onclick="checkout()">结算</button>
    </section>
    <!-- 用户注册模块 -->
    <section id="reg">
        <h2>用户注册</h2>
        <form id="regForm">
            <label for="uname">用户名：</label>
            <input type="text" id="uname" required placeholder="请输入用户名">

            <label for="pwd">密码：</label>
            <input type="password" id="pwd" required placeholder="请输入密码">

            <label for="email">邮箱：</label>
            <input type="email" id="email" required placeholder="请输入邮箱">

            <button type="submit">立即注册</button>
        </form>
    </section>


    <script>


        // 轮播图功能模块，包含自动轮播、手动切换等功能
        // 定义一个变量来存储自动轮播的定时器，用于控制自动切换幻灯片的时间间隔
        let autoSlideInterval;

        // 初始化幻灯片索引，记录当前显示的幻灯片位置
        let slideIndex = 0;
        // 获取所有幻灯片元素，方便后续操作幻灯片的显示和隐藏
        const slides = document.querySelectorAll('.slide');
        // 获取所有指示器元素，用于指示当前显示的幻灯片
        const indicators = document.querySelectorAll('.indicator');

        /**
         * 启动自动轮播功能
         * 该函数会设置一个定时器，每隔5秒调用一次nextSlide函数，实现幻灯片的自动切换
         */
        function startAutoSlide() {
            autoSlideInterval = setInterval(nextSlide, 5000);
        }

        /**
         * 停止自动轮播功能
         * 该函数会清除之前设置的定时器，停止幻灯片的自动切换
         */
        function stopAutoSlide() {
            clearInterval(autoSlideInterval);
        }

        // 获取轮播图容器，用于添加鼠标事件监听器
        const carouselContainer = document.querySelector('.carousel-container');

        // 添加鼠标悬停事件监听器，当鼠标进入轮播图容器时，停止自动轮播
        carouselContainer.addEventListener('mouseenter', stopAutoSlide);
        // 添加鼠标移出事件监听器，当鼠标离开轮播图容器时，重新启动自动轮播
        carouselContainer.addEventListener('mouseleave', startAutoSlide);

        /**
         * 显示指定索引的幻灯片
         * @param {number} index - 幻灯片的索引，从0开始计数
         */
        function showSlide(index) {
            // 移除所有幻灯片和指示器的 active 类，确保当前只有一个幻灯片和指示器处于激活状态
            slides.forEach(slide => slide.classList.remove('active'));
            indicators.forEach(indicator => indicator.classList.remove('active'));

            // 为当前幻灯片和指示器添加 active 类，使其显示为激活状态
            slides[index].classList.add('active');
            indicators[index].classList.add('active');

            // 移动幻灯片，通过修改carousel-slides元素的transform属性实现幻灯片的水平移动
            const slideWidth = slides[0].clientWidth;
            document.querySelector('.carousel-slides').style.transform = `translateX(-${slideWidth * index}px)`;
        }

        /**
         * 切换到下一张幻灯片
         * 该函数会计算下一个幻灯片的索引，并调用showSlide函数显示相应的幻灯片
         */
        function nextSlide() {
            // 计算下一个幻灯片索引，使用取模运算符确保索引在有效范围内
            slideIndex = (slideIndex + 1) % slides.length;
            showSlide(slideIndex);
        }

        /**
         * 切换到上一张幻灯片
         * 该函数会计算上一个幻灯片的索引，并调用showSlide函数显示相应的幻灯片
         */
        function prevSlide() {
            // 计算上一个幻灯片索引，使用取模运算符确保索引在有效范围内
            slideIndex = (slideIndex - 1 + slides.length) % slides.length;
            showSlide(slideIndex);
        }

        /**
         * 切换到指定索引的幻灯片
         * @param {number} index - 幻灯片的索引，从0开始计数
         */
        function goToSlide(index) {
            slideIndex = index;
            showSlide(slideIndex);
        }

        // 启动自动轮播，每5秒切换一次幻灯片
        startAutoSlide();

        // 初始化显示第一张幻灯片
        showSlide(slideIndex);

        // 购物车功能模块，包含添加商品、更新购物车显示、移除商品等功能
        // 初始化购物车数组，用于存储用户添加到购物车的商品信息
        let cart = [];

        /**
         * 将商品添加到购物车
         * @param {number} id - 商品的唯一标识
         * @param {string} name - 商品的名称
         * @param {number} price - 商品的单价
         */
        function addToCart(id, name, price) {
            // 检查购物车中是否已存在该商品
            const item = cart.find(item => item.id === id);

            if (item) {
                // 如果商品已存在，增加其数量
                item.quantity += 1;
            } else {
                // 如果商品不存在，将其添加到购物车
                cart.push({ id, name, price, quantity: 1 });
            }

            // 更新购物车显示，确保页面上的购物车信息与实际购物车数据一致
            updateCart();
            // 显示添加商品的通知，提示用户商品已成功添加到购物车
            showNotif(`已添加 ${name} 到购物车`);
        }

        /**
         * 更新购物车的显示内容和总价
         * 该函数会根据购物车数组中的数据，更新页面上的购物车列表和总价显示
         */
        function updateCart() {
            // 获取购物车列表元素和总价元素，用于更新页面上的购物车信息
            const cartList = document.getElementById('cartList');
            const cartTotal = document.getElementById('cartTotal');

            // 清空购物车列表，准备重新渲染购物车内容
            cartList.innerHTML = '';

            if (cart.length === 0) {
                // 如果购物车为空，显示提示信息
                cartList.innerHTML = '<li>购物车为空</li>';
                cartTotal.textContent = '¥0.00';
                return;
            }

            let total = 0;

            cart.forEach(item => {
                // 计算商品的小计
                const subtotal = item.price * item.quantity;
                total += subtotal;

                const li = document.createElement('li');
                li.innerHTML = `
                    ${item.name} x ${item.quantity} - ¥${subtotal.toFixed(2)}
                    <button onclick="removeFromCart(${item.id})">删除</button>
                `;
                cartList.appendChild(li);
            });

            // 更新总价显示，将计算得到的总价显示在页面上
            cartTotal.textContent = `¥${total.toFixed(2)}`;
        }

        /**
         * 从购物车中移除指定ID的商品
         * @param {number} id - 商品的唯一标识
         */
        function removeFromCart(id) {
            // 过滤掉指定ID的商品，更新购物车数组
            cart = cart.filter(item => item.id !== id);
            // 更新购物车显示，确保页面上的购物车信息与实际购物车数据一致
            updateCart();
        }

        /**
         * 清空购物车
         * 该函数会将购物车数组重置为空数组，并更新购物车显示
         */
        function clearCart() {
            // 清空购物车数组
            cart = [];
            // 更新购物车显示，确保页面上的购物车信息与实际购物车数据一致
            updateCart();
        }

        /**
         * 结算购物车
         * 该函数会检查购物车是否为空，如果不为空则弹出结算提示框，并清空购物车
         */
        function checkout() {
            if (cart.length === 0) {
                // 如果购物车为空，显示提示信息
                showNotif('购物车为空，无法结算');
                return;
            }

            // 弹出结算提示框，提示用户结算功能已触发
            alert('结算功能已触发！在实际应用中，这里会跳转到支付页面。');
            // 清空购物车
            clearCart();
        }
        // 注册表单验证模块，用于验证用户输入的注册信息是否有效
        // 为注册表单添加提交事件监听器，当用户提交表单时触发验证逻辑
        document.getElementById('regForm').addEventListener('submit', function (e) {
            // 阻止表单默认提交行为，避免页面刷新
            e.preventDefault();

            // 获取用户名、密码和邮箱的值，用于后续验证
            const uname = document.getElementById('uname').value;
            const pwd = document.getElementById('pwd').value;
            const email = document.getElementById('email').value;

            let isValid = true;

            if (uname.length < 3) {
                // 用户名长度不足，标记为无效并显示提示信息
                isValid = false;
                showNotif('用户名至少需要3个字符');
            }

            if (pwd.length < 6) {
                // 密码长度不足，标记为无效并显示提示信息
                isValid = false;
                showNotif('密码至少需要6个字符');
            }

            if (!email.includes('@') || !email.includes('.')) {
                // 邮箱格式无效，标记为无效并显示提示信息
                isValid = false;
                showNotif('请输入有效的邮箱地址');
            }

            if (isValid) {
                // 注册信息有效，显示成功提示信息
                showNotif('注册成功！即将跳转到登录页面...');
                setTimeout(() => {
                    // 弹出注册成功提示框
                    alert('注册成功！在实际应用中，这里会跳转到登录页面。');
                    // 重置表单，清空用户输入的信息
                    this.reset();
                }, 1500);
            }
        });

        /**
         * 显示通知提示框
         * @param {string} message - 通知的内容
         */
        function showNotif(message) {
            // 创建通知元素，用于显示通知信息
            const notif = document.createElement('div');
            notif.className = 'notification';
            notif.textContent = message;
            document.body.appendChild(notif);

            setTimeout(() => {
                // 添加淡出类，使通知框逐渐消失
                notif.classList.add('fade-out');
                setTimeout(() => {
                    // 移除通知元素，从页面上删除通知框
                    document.body.removeChild(notif);
                }, 300);
            }, 3000);
        }

        // 添加通知样式，通过创建style元素动态添加CSS样式
        // 创建样式元素，用于存储通知框的样式信息
        const style = document.createElement('style');
        style.textContent = `
           .notification {
                position: fixed;
                top: 20px;
                right: 20px;
                background-color: #333;
                color: white;
                padding: 12px 20px;
                border-radius: 4px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                z-index: 100;
                opacity: 0;
                transform: translateY(-20px);
                transition: opacity 0.3s, transform 0.3s;
            }

           .notification.show {
                opacity: 1;
                transform: translateY(0);
            }

           .notification.fade-out {
                opacity: 0;
                transform: translateY(-20px);
            }
        `;
        // 将样式元素添加到文档头部，使样式生效
        document.head.appendChild(style);


    </script>
    <script>
            // 商品搜索功能模块，用于根据用户输入的关键词搜索商品
            // 获取搜索输入框、搜索按钮和所有商品项元素，用于后续的搜索操作
            const searchInput = document.getElementById('search-input');
            const searchBtn = document.getElementById('search-btn');
            const prodItems = document.querySelectorAll('.prod-item');

            // 为搜索按钮添加点击事件监听器，当用户点击搜索按钮时触发搜索逻辑
            searchBtn.addEventListener('click', () => {
                // 获取搜索关键词并转换为小写，确保搜索不区分大小写
                const searchTerm = searchInput.value.toLowerCase();

                prodItems.forEach(item => {
                    // 获取商品名称并转换为小写，确保搜索不区分大小写
                    const prodName = item.querySelector('.prod-info p').textContent.toLowerCase();
                    if (prodName.includes(searchTerm)) {
                        // 如果商品名称包含搜索关键词，显示商品项
                        item.style.display = 'block';
                    } else {
                        // 如果商品名称不包含搜索关键词，隐藏商品项
                        item.style.display = 'none';
                    }
                });
            });
        </script>
</body>

</html>